<template>
  <div class="graph-body-box">
    <div class="no-data" v-if="setting.isBegin">图表在此处生成</div>
    <div class="graph-chart" v-else>
      <!-- {{setting.graphOptions}} -->
        <graph-panel
          ref="graphpanel"
          :paneltype="'edit'"
          :graph-type="setting.graphType"
          :datasource="setting.dataSource"
          :graph-options="setting.graphOptions" >
        </graph-panel>
    </div>
  </div>
</template>
<script type="text/javascript">
import GraphPanel from '@/pages/ui-editor/chart/panel'

export default {
  name: 'WidgetChart',
  components: { GraphPanel },
  data () {
    return {
    }
  },
  props: {
    setting: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.graph-body-box {
  position: relative;
  height: 300px;
  > .no-data {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #666;
  }
  > .graph-chart {
    height: 100%;
    width: 500px;
    margin: auto;
  }
}
</style>
